<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>loading3</title>
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
		
        <style>
            .loading {
                width: 100%;
                height: 100%;
                position: fixed;
                top: 0;
                left: 0;
                z-index: 100;
                background-color: #fff;
            }
            .loading .pic {
                /*页面开始加载的时候上方显示的一条线，默认宽度为0*/
                width: 0%;
                height: 5px;
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                background: #f33;
            }
        </style>
    </head>
    <body>
        <div class="loading">
            <div class="pic"></div>
        </div>

        <header>
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
        </header>
        <!--设置页面头部加载完成是线条的宽度为10%，以此类推，当页面全部加载完成时，上方线条的宽度为100%-->
        <script>
            $(".loading .pic").animate({width: "10%"}, 100);;
        </script>

        <section class="banner">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "30%"}, 100);;
        </script>

        <section class="about">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "50%"}, 100);;
        </script>

        <section class="pro">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2340206182,2517834380&fm=27&gp=0.jpg">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1744644003,881536991&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "70%"}, 100);;
        </script>

        <section class="news">
            <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=834235734,679217072&fm=27&gp=0.jpg">
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1766623083,2422561975&fm=27&gp=0.jpg">
        </section>

        <script>
            $(".loading .pic").animate({width: "90%"}, 100);;
        </script>

        <footer>
            <img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=38047904,2449899632&fm=27&gp=0.jpg">
        </footer>
        <!--当线条的宽度显示为100%时，将红色线条隐藏，显示内容-->
        <script>
            $(".loading .pic").animate({width: "100%"}, 100, function(){
                $(".loading").fadeOut();
            });;
        </script>

        <!--但是这个方法有一个问题，就是虽然我们看见内容已经加载完了，但是这个只是把图片的数据载入进来，有的图片是从上到下慢慢加载的，这个是不影响页面，因此这个方法也可以使用，这个就是采用了从上到下的执行顺序的特效来完成这个效果。如果你想让效果更加的流畅，可以把走到每一个模块线条的样式拆分的细一点-->
    </body>
</html>